<template>
    <div class="divBox">
        <div class="item">
            <div class="item-label">选择主题：</div>
            <div class="item-content">
                <el-radio-group v-model="id" size="small">
                    <el-radio :label="item.id" border v-for="item in theme">{{item.name}}</el-radio>
                </el-radio-group>
            </div>
        </div>
        <div class="item">
            <div class="item-label">当前主题示例：</div>
            <div class="item-content">
                <div class="imageBox"  v-for="item in theme"  v-show="id == item.id">
                    <img :src="item.image" width="100%">
                </div>
            </div>
        </div>
        <div class="item saveButton">
          <div class="button-item">
            <el-button size="small" type="primary" @click="onSave">保存</el-button>
          </div>
        </div>
    </div>
</template>

<script>
import { themeList, setTheme } from '@/api/system'
import { getBaseInfo } from "@/api/user.js";

export default {
  name: 'themeStyle',
  data() {
    return {
        theme:{
        },
        id: 0,
        merData: ''
    }
  },
  mounted() {
    this.getInfo()
    this.getthemeList()
  },
  created() {
  },
  computed: {
  },
  methods: {
    getthemeList() {
        let that = this
        themeList().then(res => {
              that.theme = res.data;
              this.image = res.data[1].image
        }).catch(res => {
              
        })
    },
    selectTheme() {
      var id = this.id
      this.image = this.theme[id].image
    },
    onSave() {
      
      setTheme({id: this.id}).then(res => {
        this.$message.success(res.message);
      }).catch(res => {
        this.$message.error(res.message);
      })
    },
    //获取历史信息
    getInfo() {
      this.merModel = false;
      getBaseInfo().then((res) => {
        this.merData = res.data;
        this.id = res.data.theme_id
      });
    },
  }
}
</script>

<style scoped lang="scss">
  .form-create .el-form-item__label {
    font-size: 12px !important;
  }

  .FromData {
    /deep/ .el-textarea__inner {
      min-height: 100px !important;
    }
  }

  .divBox {
      display: flex;
      flex-direction: column;
  }
  .item {
    display: flex;
    flex-direction: row;
    padding: 10px 20px;
    .item-label {
        width: 100px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        color: #606266;
        font-weight: 700;
        text-align: right;
    }
    .item-content {
        margin-left: 50px;
    }
    .imageBox {
        width: 300px;
        height: 500px;
        border: 1px solid #eee;
        overflow: hidden;
        overflow-y: auto;
    } 
  }
  .saveButton {
    justify-content: center;
    flex-direction: row;
  }

</style>
